<template>
    <div class="app-container">

        <el-form ref="formData" :model="formData" :rules="rules" label-position="left" label-width="150px">
  
      <el-card>
        <el-row>
            <el-button type="primary" @click="tuchu()">取消</el-button>
        </el-row>
        <el-form-item label="题目类型 " prop="quType">
  
          <el-select v-model="formData.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
            <el-option
              v-for="item in quTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  
        </el-form-item>
  
        <el-form-item label="难度等级 " prop="level">
  
          <el-select v-model="formData.level" class="filter-item">
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  
        </el-form-item>
  
        <el-form-item label="归属题库" prop="repoIds">
  
             <el-select multiple v-model="formData.repoIds"  class="filter-item">
                <el-option
                v-for="item in repoList"
                :key="item.value"
                :label="item.title"
                :value="item.id"
                />
          </el-select>
  
  
        </el-form-item>
  
        <el-form-item label="题目内容" prop="content">
             <quill-editor v-model="formData.content" ref="myQuillEditor" style="height: 400px;" :options="editorOption"/>
        </el-form-item>
  
        <br/><br/><br/><br/><br/><br/>
  
        <el-form-item label="试题图片">
              <el-upload
              action="http://localhost:8080/qu/upload"
              list-type="picture-card"
              name="head"
              :on-success="uploadSuccess"
             >
              <i class="el-icon-plus"></i>
            </el-upload>
       
        </el-form-item>
  
        <el-form-item label="整题解析" prop="oriPrice">
          <el-input v-model="formData.analysis" type="textarea" :precision="1" :max="999999" />
        </el-form-item>
  
      </el-card>
  
      <div  class="filter-container" style="margin-top: 25px" v-if="formData.quType!=4">
  
        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
          添加
        </el-button>
  
        <el-table
          :data="formData.answers"
          :border="true"
          style="width: 100%;"
        >
          <el-table-column
            label="是否答案"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
  
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
  
            </template>
  
          </el-table-column>
  
          <el-table-column
           
            label="选项图片"
            width="220px"
            align="center"
          >
            <template slot-scope="scope">
  
                <el-upload
                  :limit="1"
                  action="http://localhost:8080/qu/upload"
                  list-type="text"
                  name="head"
                  :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess(response, file, fileList, scope.row);
                  }
                "
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
  
            </template>
          </el-table-column>
  
          <el-table-column
            label="答案内容"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" />
            </template>
          </el-table-column>
  
          <el-table-column
            label="答案解析"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.analysis" type="textarea" />
            </template>
          </el-table-column>
  
          <el-table-column
            label="操作"
            align="center"
            width="100px"
          >
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
  
        </el-table>
  
      </div>
  
      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="info" @click="onCancel">返回</el-button>
      </div>
  
    </el-form>
    </div>
  </template>
  
  <script>
  import {findALL} from '@/api/repo'
  import {quillEditor} from 'vue-quill-editor'
  import {getbyid} from '@/api/qu'
  import {insertQu} from '@/api/qu'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    components: {quillEditor},
    data() {
        return {
            editorOption:{},
            quTypes:[
                {value:1,label:"单选题"},
                {value:2,label:"多选题"},
                {value:3,label:"判断题"},
                {value:4,label:"简答题"}
            ],
            levels:[
                {value:1,label:"普通"},
                {value:2,label:"较难"},
            ],
  
            formData:{
              quType:1,
              level:1,
              repoIds:[],
              content:"",
              image:"",
              answers:[
                         {isRight:0,content:"",image:"",analysis:""},
                         {isRight:0,content:"",image:"",analysis:""},
                         {isRight:0,content:"",image:"",analysis:""},
                         {isRight:0,content:"",image:"",analysis:""},
              ]
  
            },
            repoList:[],
           
        }
    },
    methods:{
        tuchu(){
            this.$router.push({path:"/qu/list"})
        }
,
       uploadSuccess(response, file, fileList,row){
        console.log(response)
           if(row){
               row.image = response
           }else{
              this.formData.image =  response
           }
       },
        handleAdd(){
            if(this.formData.quType ==1 || this.formData.quType ==2){
              this.formData.answers.push( {isRight:0,content:"",analysis:""})
            }
        },
        removeItem(index){
           
             if(this.formData.quType ==1 || this.formData.quType ==2){
               this.formData.answers.splice(index,1)
            }
        },
        
        submitForm(){
  
            
  
             //表单校验
  
  
             this.formData.answers.forEach(item=>{
                 if(item.isRight ){
                    item.isRight = 1;
                 }else{
                   item.isRight = 0;
                 }
             })
             insertQu(this.formData).then(res=>{
                 //message
                 this.$message({
                     type: res.code==0?"success":"error",
                     message:res.msg
                 })
  
                 //路由跳转 列表页
             })
        }
    },
    created(){
        //获取所有题库
        var id = this.$route.params.id
        console.log(id)
        getbyid(id).then(res=>{
            console.log(res)
            this.formData = res;
            console.log(this.formData)
        //获取题库的id
            res.repos.forEach(item=>{
              console.log(item)
              this.formData.repoIds.push(item.id)
              console.log(this.formData.repoIds)
            })
            
        })

        //获取所有题库
          findALL().then(res=>{
              this.repoList = res;
          })
    },
    watch:{
        "formData.quType":{
            handler(newVal,oldVal){
                if(newVal == 3){
  
                    this.formData.answers = [
                         {isRight:0,content:"错误",analysis:""},
                         {isRight:0,content:"正确",analysis:""},
                    ]
  
                }
  
                if(newVal == 1 || newVal == 2){
  
                    this.formData.answers = [
                         {isRight:0,content:"",analysis:""},
                         {isRight:0,content:"",analysis:""},
                         {isRight:0,content:"",analysis:""},
                         {isRight:0,content:"",analysis:""},
                    ]
  
                }
  
                 if(newVal == 4){
                    this.formData.answers = []
                }
  
  
  
            }
        }
    }
  
  }
  </script>